<template>
<view class="bg-content">
  <view class="hx"></view>
  <view>
    <view class="txt-title">
      核销详情
    </view>
    <view class="flex text-center">
      <view class="flex-sub">
        <view class="txt-num">{{detail.totalPrice||0}}</view>
        <view class="txt-text"><image src="@/static/images/je.png" class="png" />订单金额</view>
      </view>
      <view class="flex-sub">
        <view class="txt-num">{{detail.totalVerifyPrice||0}}</view>
        <view class="txt-text"><image src="@/static/images/hx.png" class="png" />核销金额</view>
      </view>
      <view class="flex-sub">
        <view class="txt-num">{{detail.verifyPrice||0}}</view>
        <view class="txt-text"><image src="@/static/images/tx.png" class="png" />提现金额</view>
      </view>
    </view>
    <view class="margin-top-xl">
      <uni-steps :options="[{title: '待提现'}, {title: '已提现'}, {title: '提现失败'}]" :active="detail.tixianFlag||0"></uni-steps>
    </view>
    <view class="margin-top-xl txt-apply-time margin-left">
      申请时间：{{detail.createTime}}
    </view>
    <view class="margin-top txt-apply-zt margin-bottom  margin-left">
      申请进度：<font class="zt">{{detail.tixianFlag}}</font>
    </view>
    <view class="hx"></view>
  </view>
  <view class="txt-title">
    核销订单
  </view>
  <view class="v-list">
    <view class="txt-ali nav">
      <view class="cu-item" :class="item.id==TabCur?'txt-b-fouce cur':'txt-b'" @tap="tabSelect(item)"  v-for="(item,index) in itemList" >
        {{item.title}}
      </view>
    </view>
    <view class="cu-list menu margin-left-sm margin-right-sm">
      <view v-if="TabCur == 1">
        <view class="cu-item bd" v-for="(item,idx) in shopCardLogList" :key="idx">
          <view class="flex align-center">
            <view class="sx"></view>
            <view class="flex-treble text-cut margin-left-sm font_32">
              {{item.objectName}}
            </view>
          </view>
          <view class="flex margin-left-sm margin-top-xs">
            <view class="flex-sub">{{item.adminName}}</view>
            <view class="flex-sub text-right">{{item.verifyTime}}</view>
          </view>
          <view class="flex margin-left-sm margin-top-xs text-me">
            <view class="flex-sub">总金额:<font class="f1">￥{{item.totalPrice}}</font></view>
            <view class="flex-sub text-right">核销金额:<font class="f2">￥{{item.totalVerifyPrice}}</font></view>
          </view>
          <view class="text-cut margin-left-sm margin-top-xs text-remark">
            {{item.remark}}
          </view>
        </view>
      </view>
      <view v-if="TabCur == 2">
        <view class="cu-item bd" v-for="(item,idx) in personList" :key="idx">
<!--          <view class="flex align-center">-->
<!--            <view class="sx"></view>-->
<!--            <view class="flex-treble text-cut margin-left-sm font_32">-->
<!--              {{item.objectName}}-->
<!--            </view>-->
<!--          </view>-->
          <view class="flex margin-left-sm margin-top-xs">
            <view class="flex-sub">{{item.objectName}}</view>
            <view class="flex-sub text-right">{{item.verifyTime}}</view>
          </view>
          <view class="flex margin-left-sm margin-top-xs text-me">
            <view class="flex-sub">总金额:<font class="f1">￥{{item.totalPrice}}</font></view>
            <view class="flex-sub text-right">核销金额:<font class="f2">￥{{item.totalVerifyPrice}}</font></view>
          </view>
<!--          <view class="text-cut margin-left-sm margin-top-xs text-remark">-->
<!--            {{item.remark}}-->
<!--          </view>-->
        </view>
      </view>
      <view v-if="TabCur == 3">
        <view class="text-gray margin-bottom cuIcon-title">订单统计</view>
        <view class="flex b-bottom">
          <view class="flex-sub je">订单金额:<font class="f1">￥{{orderNubmer.orderNumber}}</font></view>
          <view class="flex-sub text-right je">核销金额:<font class="f2">￥{{orderNubmer.verifyNumber}}</font></view>
        </view>
        <view class="text-gray margin-bottom-sm cuIcon-title margin-top">订单明细</view>
        <view class="cu-item bd" v-for="(item,idx) in orderList" :key="idx">
          <view class="flex align-center">
            <view class="sx"></view>
            <view class="flex-treble text-cut margin-left-sm font_32">
              {{item.productName}}
            </view>
          </view>
<!--          <view class="poi margin-left-sm margin-top-sm flex-sub">-->
<!--            {{item.poiName}}-->
<!--          </view>-->
          <view class="flex margin-left-sm margin-right-sm margin-top-sm poi">
            <view class="flex-sub poi">
              {{item.poiName}}
            </view>
            <view class="flex-sub text-right">
              订单金额:<font class="f1">￥{{item.totalPrice}}</font>
            </view>
<!--            <view class="flex-sub text-right">-->
<!--              核销金额:<font class="f2">￥{{item.totalVerifyPricez||0}}</font>-->
<!--            </view>-->
          </view>
        </view>
      </view>
      <view class="text-center padding text-gray">~~~~我是有底线的~~~~</view>
    </view>
  </view>
</view>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {onLoad} from '@dcloudio/uni-app';
import {verifyDetail} from '../../common/api/user'
const detail = ref({});
const shopCardLogList = ref([]);
const personList = ref([]);
const id = ref(0);
const TabCur = ref(1);
const itemList = ref([{id:1,title:'商户卡项'},{id:2,title:'推荐代理'},{id:3,title:'订单核销'}])
const orderList = ref([])
const orderNubmer = ref({})

onLoad((options) => {
  let message = uni.getStorageSync('v-detail');
  detail.value  = JSON.parse(message)
  console.log('detail:',detail.value)
  id.value = options.id
});
const getDetail = ()=>{
  verifyDetail(id.value).then(res=>{
    console.log('res:',res)
    detail.value = res.data
    shopCardLogList.value = res.data.shopCardLogList
    personList.value = res.data.personList
    orderNubmer.value['orderNumber'] = res.data.order.totalPrice||0
    orderNubmer.value['verifyNumber'] = res.data.order.totalVerifyPrice||0
    orderList.value = res.data.order.orderVerifyList
  })
}

const tabSelect = (item)=>{
  TabCur.value = item.id
}

onMounted(async () => {
  getDetail()
})
</script>

<style lang="scss" scoped>
.bg-content{
  .hx{
    background: rgb(248,248,248);
    height: 20rpx;
    width: 100wh;
  }
  .txt-title {
    margin-left: 30rpx;
    margin-top: 40rpx;
    margin-bottom: 60rpx;
    font-weight: bold;
    font-size: 36rpx;
    color: #1A1A1A;
  }
  .txt-num{
    font-size: 36rpx;
    color: #1B1B1B;
  }
  .txt-text{
    font-size: 24rpx;
    color: #6A6A6A;
    margin-top: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .png{
      width: 25rpx;
      height: 25rpx;
      margin-right: 10rpx;
    }
  }
  .txt-apply-time{
    font-size: 28rpx;
    color: #373737;
    border-bottom: 1px solid #E8E8E8;
    padding-bottom: 20rpx;
  }
  .txt-apply-zt{
    font-size: 28rpx;
    color: #373737;
    .zt{
      color: #EAB769;
    }
  }
}
.v-list{
  .sx{
    width: 6rpx;
    background: #EAB769;
    height: 30rpx;
  }
  .font_32{
    font-size: 32rpx;
    color: #1D1D1D;
  }
  .bd{
    border-bottom: 1rpx solid #eeeeee;
    padding: 20rpx 0rpx;
    .text-remark{
      color: grey;
      font-size: 24rpx;
    }

    .text-me{
      font-size: 26rpx;
    }
  }
}
.f1{
  color: #FF9702;
}
.f2{
  color: #FF3A3A;
}

.txt-ali {
  align-items: baseline;
  padding-left: 20rpx;
}

.txt-b-fouce{
  font-size: 32rpx;
  color: #EAB769;
}

.txt-b{
  font-size: 26rpx;
  color: #A5A5A5;
}

.nav .cu-item.cur {
  border-bottom: 4rpx solid #EAB769;
}

.je{
  font-size: 34rpx;
}
.order-number{
  display: inline-block;
}
.verify-number{
  display: inline-block;
}
.poi{
  font-size: 28rpx;
  color: #808080;
}

.b-bottom{
  border-bottom: 1px solid #dcdbdb;
}
</style>
